<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jquery ajax</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/jquery/jquery.js"></script>
</head>

<body>
<div class="layui-container">
    <h3 style="margin: 15px 0">hello world layui demo file.</h3>
    <button class="layui-btn-sm layui-btn layui-btn-primary">primary</button>
    <button class="layui-btn-sm layui-btn layui-btn-success">success</button>
    <button class="layui-btn-sm layui-btn layui-btn-danger">danger</button>
    <button class="layui-btn-sm layui-btn layui-btn-normal">normal</button>
    <button class="layui-btn-sm layui-btn layui-btn-warm">warn</button>
    <hr>
    <a href="javascript:void(0)" class="layui-btn-sm layui-btn layui-btn-success btn1">jquery.load()</a>
    <a href="javascript:void(0)" class="layui-btn-sm layui-btn layui-btn-warm btn2">jquery.ajax()</a>
    <a href="javascript:void(0)" class="layui-btn-sm layui-btn layui-btn-normal btn3">jquery.get()</a>
    <a href="javascript:void(0)" class="layui-btn-sm layui-btn layui-btn-danger btn4">jquery.post()</a>
    <br>
    <p style="margin-top: 5px"></p>
    <br>

        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input type="text" name="a" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="p" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn save" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

</div>
<script>
    $(function(){
        //javascript jquery code
        $('.btn1').click(function(){
            //http://127.0.0.1:8080/t1
            //$('span:first').load("/t1")
        })

        $('.btn3').click(function(){
            $.get('http://localhost/api/t2',{id:5,name:'李四'},function(e){
                alert(e)
            },'text')
        })

        $('.btn4').click(function(){
            let m = $(this)
            $.post('http://localhost/api/t2',{id:111,name:'张三丰'},function(e){
                m.html(e.msg)
            },'json')
        })

        $(".save").click(function(){
            let aa = $('input[name=a]').val()
            let pp = $('input[name=p]').val()
            $.ajax({
                type: "POST",
                url: "http://localhost/api/t2",
                data: {a:aa,p:pp,action:'save'},
                dataType: 'json',
                cache: false,
                success: function(e){
                    alert( "Data Saved: " + e.msg );
                }
            })
        })

        setInterval(()=>{
            $('p:first').load("http://localhost/api/t1")
        },1000)
    })

    layui.use('form', function(){
        var form = layui.form;
    })
</script>
</body>
</html>
